<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
		<title>Mootool Sample's Scroll</title>
		<script src="http://localhost:8081/upis/js/mootools.svn.js" type="text/javascript"></script>
		<style type="text/css">
#area {
	background: #ccc;
	height: 20px;
	width: 500px;
}

#knob {
	height: 20px;
	width: 20px;
	background: #000;
}

#area2 {
	position: relative;
	height: 15px;
	width: 280px;
	background: #000;
}

#knob2 {
	position: absolute;
	height: 15px;
	width: 20px;
	background: #ff3300;
	cursor: pointer;
}

#area3 {
	background: #ccc;
	height: 300px;
	width: 20px;
}

#knob3 {
	height: 20px;
	width: 20px;
	background: #000;
}
</style>
		<script type="text/javascript">
		alert('a');
alert('a');
</script>
	</head>
	<body>


		<h3>
			Slider 1
		</h3>
		<div id="console"></div>
		<div id="console2"></div>
		<div id="area">
			<div id="knob"></div>
		</div>
		<p id="upd">
			XX
		</p>

		<h3>
			Slider 2
		</h3>
		<p>
			This slider has as option offset: 5
		</p>
		<p>
			Note: Slider 2 has 5 (5px) of offset option, you'll see the knob
			going outside the slider because of the offset. Look at js code
		</p>
		<div id="area2">
			<div id="knob2"></div>
		</div>
		<p id="upd2">
			XX
		</p>

		<h3>
			Slider 3
		</h3>
		<div>
			Options: vertical mode
		</div>
		<div id="area3">
			<div id="knob3"></div>
		</div>
		<p id="upd3">
			XX
		</p>


	</body>
</html>